<template>
	<view>

		<view  v-if='WEBCONFIG?.ex_status=="2"'>
			<view class="bg-white px-16 py-12">
				<view class="flex flex-x-space-between flex-y-center">
					<view class="flex flex-y-center">
						<image :src="detail?.user.avatar" class="w-50 h-50 rounded-circle"></image>
						<view class="ml-12 flex flex-column">
							<text class="fs-14">{{detail?.user.nickname}}</text>
							<text class="fs-12 text-grey-4 mt-4">{{detail?.create_at}}</text>
						</view>
					</view>
					<view>
						<view class="border-blue-1 flex rounded-30 px-12 py-5 flex-y-center"
							v-if="detail?.follow_id==null" @click="follow()">
							<uv-icon name="plus" color="#3D5CFF" size="13" bold></uv-icon>
							<text class="fs-12 text-blue-1 ml-2 fw-600">收藏</text>
						</view>
						<view v-else @click="follow()">
							<text style="background-color: #F0F9FF;"
								class="rounded-30 px-17 py-7 text-blue-1 fs-12 fw-600">
								已收藏
							</text>
						</view>
					</view>
				</view>
				<view class="mt-12">
					<text>{{detail?.content}}</text>
					<view class="grid-columns-6 grid-gap-2 mt-10" v-if="detail.images?.length">
						<view class="grid-column-2" v-for="(url,index) in detail.images" :key="index"
							@tap.stop="preview(index,detail.images)">
							<image :src="url" lazy-load mode="scaleToFill" class="w-100 h-100 rounded-4" />
						</view>
					</view>
				</view>

				<view class="mt-10 flex">

				</view>
			</view>
			<view class="mt-10 bg-white px-10 pt-10 " style="padding-bottom: 200rpx;">
				<text class="fw-600 fs-13">全部回复</text>
				<z-paging ref="paging" :top-z-index='1' @query="getReply" use-page-scroll v-model="replyList"
					:auto="false">
					<view class="p-12 line" v-for="(item,index) in replyList" :key='index'>
						<view class="flex flex-y-center">
							<image :src="item?.user.avatar" class="w-50 h-50 rounded-circle"></image>
							<text class="fs-13 ml-8">{{item?.user.nickname}}</text>
						</view>
						<view class="mt-10 flex flex-column grid-gap-8">
							<text class="fs-15"
								@click.stop="onSelect(item.user.nickname,index)">{{item?.content}}</text>
							<text class=" text-grey-4 fs-11">{{iten?.create_at}}</text>
							<view class="rounded-6 px-10 py-5 fs-13 bg-grey-6 leading-24" style="letter-spacing: 2rpx;"
								v-if="item.reply">
								<view v-for="(reply,index1) in item.reply" :key='index'>
									<text class="text-grey-1 fw-600">{{reply?.user?.nickname}}：</text>
									<text class="text-grey-2">{{reply?.content}}</text>
								</view>
							</view>
						</view>
					</view>

				</z-paging>
			</view>
			<view class="pb-safe-area position-fixed bg-white bottom-0 box left-0 right-0 box-sizing"
				style="z-index: 999;">
				<view class="w-p-100 p-12  box-sizing  flex-y-center  flex">
					<view class="bg-grey-6 px-12 rounded-30 py-5 w-p-70">
						<input :placeholder="placeholder" :focus="focus" v-model="form.content" @focus="show=false"
							@blur="blur" placeholder-class="fs-13 text-grey-4" />
					</view>
					<view class="flex flex-x-space-evenly w-p-30" v-if="show">
						<uv-icon name="heart" v-if="detail?.likes_id==null" color="#ACACAC" size="24"
							@click="likes"></uv-icon>
						<uv-icon name="heart-fill" v-if="detail?.likes_id!=null" color="#EA4545" size="24"
							@click="likes"></uv-icon>
						<uv-icon name="chat" color="#ACACAC" size="24"
							@click="form.reply_id=0;onSelect('楼主',0)"></uv-icon>
					</view>
					<view v-else class="flex flex-center w-p-30">
						<view class="rounded-30 px-16 py-6 text-white bg-blue-1 fs-13" @click="reply()">
							发布
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if='WEBCONFIG?.ex_status=="1"'>
			小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
		</view>
		<y-loading v-if="status"></y-loading>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
	import { $http, $tool } from '@/utils';
	import { useUserStore, useRefs, useWebConfigStore } from "@/stores/index";
	const { USERINFO } = useRefs(useUserStore());
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const detail = ref()
	const show = ref(true)
	const id = ref(0)
	const focus = ref(false)
	const status = ref(false)
	const content = ref()
	const replyList = ref([])
	const paging = ref()
	const replyIndex = ref(0)
	const placeholder = ref('回复楼主')
	useZPaging(paging)
	const form = ref({
		content: '',
		mid: 0,
		type: 1,
		reply_id: 0
	})
	onLoad((e) => {
		id.value = e.id
		form.value.mid = e.id
		getDetail()
		setTimeout(() => {
			paging.value.reload()
		}, 500)
	})


	const getReply = (page, limit) => {
		$http.get('Moments/getReply', { page: page, limit: limit, id: id.value }).then(res => {
			paging.value.complete(res.data)
		})
	}
	const follow = () => {
		$http.post('Moments/follow', { id: id.value }).then(res => {
			$tool.toast(res.msg)
			if (detail.value.follow_id) {
				detail.value.follow_id = null
			} else {
				detail.value.follow_id = e.id
			}
		})
	}
	const reply = () => {
		if (!form.value.content) {
			$tool.toast('内容不能为空')
			return;
		}
		status.value = true
		$http.post('Moments/reply', form.value).then(res => {
			$tool.toast('发布评论成功')
			form.value.reply_id = 0
			form.value.content = ''
			placeholder.value = '回复楼主'
			status.value = false
			show.value = true
			paging.value.reload()
		}).catch(() => {
			status.value = false
		})
	}

	const getDate = () => {
		let currentDate = new Date();

		// 提取日期的年、月、日、小时、分钟、秒
		let year = currentDate.getFullYear();
		let month = currentDate.getMonth() + 1; // 月份从0开始，所以加1
		let day = currentDate.getDate();
		let hours = currentDate.getHours();
		let minutes = currentDate.getMinutes();
		let seconds = currentDate.getSeconds();

		// 添加前导零
		month = month < 10 ? '0' + month : month;
		day = day < 10 ? '0' + day : day;
		hours = hours < 10 ? '0' + hours : hours;
		minutes = minutes < 10 ? '0' + minutes : minutes;
		seconds = seconds < 10 ? '0' + seconds : seconds;

		// 格式化输出为 yyyy-MM-dd HH:mm:ss
		let formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		return formattedDate
	}

	const getDetail = () => {
		$http.get('Moments/getDetail', { id: id.value }).then(res => {
			detail.value = res.data
		})
	}

	const onSelect = (e, index) => {
		focus.value = true
		placeholder.value = `回复${e}`
		replyIndex.value = index
		form.value.reply_id = replyList.value[index]['id']
	}

	const likes = () => {
		$http.post('Moments/like', { id: id.value }).then(res => {
			$tool.toast(res.msg)
			nextTick(() => {
				if (detail.value.likes_id) {
					detail.value.likes_id = null
					detail.value.likes_id -= 1
				} else {
					detail.value.likes_id = id.value
					detail.value.likes_id += 1
				}
				list.value
			})
		})
	}

	const blur = () => {
		if (form.value.content == '') {
			show.value = true
		}
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.line {
		border-bottom: 2rpx solid #eee;
	}

	.box {
		box-shadow: 0px 0px 10px 6px #eee;
	}
</style>